<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .layui-disabled, .layui-disabled:hover {
            color: #141313 !important;
        }

        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }
        .layui-card {
            border-radius: 6px 6px 6px 6px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }

        .layui-input{
            height: 45px;
            font-size: 16px;
        }
        .layui-form-label{
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding: 0px;
        }
        .pear-btn,.layui-btn{
            width: 100px;
            height: 40px;
            font-size: 18px;
            border-radius: 5px;
        }
        .layui-input-affix {
            line-height: 45px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs3 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="min-height: calc(100vh - 50px);">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        基础资料
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/udatePassword/userInfoGrid.png" alt="" style="max-width: 100%;">
                </div>
                <div style="margin-top: 62px;justify-content: space-around;" class="centered">
                    <div>
                        <img src="/img/udatePassword/user.png" alt="" style="width: 114px;height: 114px">
                    </div>
                    <div>
                        <div style="font-weight: 500;font-size: 26px;" th:text="${user_name}">欧阳李华</div>
                        <div style="font-weight: 400;font-size: 16px;color: #2176FF;margin-top: 10px"
                             th:text="${dept_name}">销售部
                        </div>
                    </div>
                </div>
                <div class="centered"
                     style="margin-top: 30px;font-weight: 400;font-size: 16px;justify-content: center;">
                    <div style="color: #636B81;">姓名:</div>
                    <div style="color: #24272E;margin-left: 25px;" th:text="${nick_name}"></div>
                </div>
                <div class="centered"
                     style="margin-top: 30px;font-weight: 400;font-size: 16px;justify-content: center;">
                    <div style="color: #636B81;">角色名:</div>
                    <div style="color: #24272E;margin-left: 25px;" th:text="${role_name}"></div>
                </div>
                <div class="centered"
                     style="margin-top: 30px;font-weight: 400;font-size: 16px;justify-content: center;">
                    <div style="color: #636B81;">手机号:</div>
                    <div style="color: #24272E;margin-left: 25px;" th:text="${phone}"></div>
                </div>
                <div class="centered"
                     style="margin-top: 30px;font-weight: 400;font-size: 16px;justify-content: center;">
                    <div style="color: #636B81;">用户创建时间:</div>
                    <div style="color: #24272E;margin-left: 25px;" th:text="${create_time}"></div>
                </div>
                <div class="centered"
                     style="margin-top: 30px;font-weight: 400;font-size: 16px;justify-content: center;">
                    <div style="color: #636B81;">用户修改时间:</div>
                    <div style="color: #24272E;margin-left: 25px;" th:text="${update_time}"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs9 layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body" style="min-height: calc(100vh - 50px);">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        密码修改
                    </div>
                </div>
                <div class="layui-row" style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/udatePassword/updatePassordGrid.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row center" style="margin-bottom: 10px;margin-top: 60px;display: flex;flex-direction: row;justify-content: center;">
                    <img src="/img/udatePassword/updatePassword.svg" alt="" style="width:250px;height: 250px">
                </div>
                <form class="layui-form layui-row center" style="display: flex;flex-direction: row;justify-content: center;">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md5">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" value="" th:value="${user_name}" disabled
                                       class="layui-input layui-disabled"
                                       style="background-color: #c0c0c057;">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">旧密码</label>
                            <div class="layui-input-block">
                                <input type="password"  lay-affix="eye" placeholder="请输入旧密码" lay-verify="required"
                                       lay-reqtext="请输入旧密码" class="layui-input pwd"
                                       name="usedPwd">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">新密码</label>
                            <div class="layui-input-block">
                                <input type="password"  lay-affix="eye" placeholder="请输入新密码" lay-verify="required|Pwd"
                                       id="oldPwd"
                                       class="layui-input pwd">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" lay-affix="eye"  placeholder="请确认密码"
                                       lay-verify="required|confirmPwd"
                                       class="layui-input pwd" name="newPwd">
                            </div>
                        </div>
                        <div class="layui-form-item submit-btn-container">
                            <div style="display: flex;flex-direction: row;justify-content: center;margin-top: 40px">
                                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="changePwd">
                                    <i class="layui-icon layui-icon-file-b"></i>
                                    保存
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 25px">重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let layer = layui.layer;

        //添加验证规则
        form.verify({
            Pwd: function (value, item) {
                if (value.length < 6) {
                    return "密码长度不能小于6位";
                }
            },
            confirmPwd: function (value, item) {
                if ($("#oldPwd").val() !== value) {
                    return "两次输入密码不一致，请重新输入！";
                }
            }
        })
        //监听提交
        form.on('submit(changePwd)', function (data) {
            let form_data = data.field;
            let loading = layer.load();
            //发异步
            $.ajax({
                type: "POST",
                url: "/my/user/change/pwd",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(form_data),
                dataType: "json",
                success: function (data) {
                    layer.close(loading);
                    if (data.code === 200) {
                        //发异步，把数据提交给
                        layer.msg(data.message, {icon: 1, time: 1800}, function () {
                            parent.location.href = "/logout";
                        });
                    } else {
                        layer.msg(data.message, {icon: 2, time: 1800});
                    }
                },
                error: function (data) {
                }
            });
            return false;
        });
    })
</script>
</body>
</html>